<div class="wp-relations-create">
    <div class="wp-relations-create-button"
         ng-if="!$ctrl.showRelationsCreateForm">
        <div class="grid-block">
            <div class="grid-content collapse wp-inline-create-button">
                <a class="wp-inline-create--add-link relation-create -focus-after-save"
                   ng-click="$ctrl.toggleRelationsCreateForm()"
                   href
                   id="relation--add-relation">
                    <i class="icon icon-add"></i>
                    <span>{{ ::$ctrl.text.addNewRelation }}</span>
                </a>
            </div>
        </div>
    </div>
    <div class="loading-indicator--location"
         data-indicator-name="relationAddDynamic">
        <div class="grid-block v-align wp-relations-create--form" ng-if="$ctrl.showRelationsCreateForm">
            <div class="grid-content collapse medium-3">
                <label class="hidden-for-sighted" for="relation-type--select">{{ ::$ctrl.text.relationType }}</label>
                <select class="form--select relationTypeSelect"
                        id="relation-type--select"
                        ng-model="$ctrl.selectedRelationType"
                        ng-options="type.name as type.label for type in $ctrl.relationTypes"
                        focus>
                </select>
            </div>
            <div class="grid-content medium-7">
                <wp-relations-autocomplete
                        work-package="$ctrl.workPackage"
                        loading-promise-name="relationAddDynamic"
                        selected-wp-id="$ctrl.selectedWpId"
                        selected-relation-type="$ctrl.selectedRelationType">
                </wp-relations-autocomplete>
            </div>
            <div class="grid-content medium-2 collapse wp-relations-controls-section relation-row">
                <accessible-by-keyboard
                        execute="$ctrl.createRelation()"
                        is-disabled="$ctrl.isDisabled || !$ctrl.selectedWpId"
                        link-class="wp-create-relation--save"
                        aria-hidden="false">
                    <icon-wrapper icon-name="checkmark"
                                  icon-title="{{ ::$ctrl.text.save }}">
                    </icon-wrapper>
                </accessible-by-keyboard>
                <accessible-by-keyboard
                        execute="$ctrl.toggleRelationsCreateForm()"
                        link-class="wp-create-relation--cancel"
                        aria-hidden="false">
                    <icon-wrapper icon-name="remove"
                                  icon-title="{{ ::$ctrl.text.abort }}">
                    </icon-wrapper>
                </accessible-by-keyboard>
            </div>
        </div>
    </div>
</div>




